<div class="card bg-light top-padded">
  <div class="card-body">
    <div>
      <strong>Adding Multiple Instructors</strong>
      <p class="text-muted">
        <i class="fas fa-exclamation-circle"></i> Add Instructor Details in the format: Name | Email | Institution
      </p>
      <textarea class="form-control" id="instructor-details-single-line" [(ngModel)]="instructorDetails" aria-label="Add multiple instructors"></textarea>
    </div>

    <div class="top-padded">
      <button class="btn btn-primary" id="add-instructor-single-line" (click)="validateAndAddInstructorDetails()">Add Instructors</button>
    </div>
  </div>
</div>

<div class="card bg-light top-padded">
  <div class="card-body">
    <div>
      <strong>Adding a Single Instructor</strong>
    </div>

    <div class="top-padded">
      <label for="instructor-name">
        <strong>Name:</strong>
      </label>
      <input class="form-control" type="text" id="instructor-name" [(ngModel)]="instructorName">
    </div>

    <div class="top-padded">
      <label for="instructor-email">
        <strong>Email:</strong>
      </label>
      <input class="form-control" type="text" id="instructor-email" [(ngModel)]="instructorEmail">
    </div>

    <div class="top-padded">
      <label for="instructor-institution">
        <strong>Institution:</strong>
      </label>
      <input class="form-control" type="text" id="instructor-institution" [(ngModel)]="instructorInstitution">
    </div>

    <div class="top-padded">
      <button class="btn btn-primary" id="add-instructor" (click)="validateAndAddInstructorDetail()">Add Instructor</button>
    </div>
  </div>
</div>

<div class="card bg-light top-padded" *ngIf="instructorsConsolidated.length">
  <div class="card-header bg-primary text-white">
    <strong>Result</strong>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Institution</th>
            <th>Action</th>
            <th>Status</th>
            <th>Message</th>
          </tr>
        </thead>
        <tbody>
          <tr tm-new-instructor-data-row
              *ngFor="let instructor of instructorsConsolidated; let i = index"
              [instructor]="instructor"
              [index]="i"
              [isAddDisabled]="activeRequests > 0"
              (addInstructorEvent)="addInstructor(i)"
              (removeInstructorEvent)="removeInstructor(i)"
              (toggleEditModeEvent)="setInstructorRowEditModeEnabled(i, $event)"
          ></tr>
        </tbody>
      </table>
      <button class="btn btn-primary top-padded" (click)="addAllInstructors()" id="add-all-instructors" [disabled]="activeRequests > 0 || isAddingInstructors">
        <tm-ajax-loading *ngIf="isAddingInstructors"></tm-ajax-loading>
        Add All Instructors
      </button>
    </div>
  </div>
</div>

<tm-account-request-table *ngIf="accountReqs.length" [accountRequests]="accountReqs" [searchString]=""></tm-account-request-table>
